<template>
  <div class="profile-card">
    <div class="personal-info">
      <div class="header">
        <div class="user-info">
          <div class="user-name">{{ userInfo?.userName }}</div>
          <div class="user-school">{{ schoolName }}</div>
        </div>
        <div
          class="details"
          :class="{ 'smart-room-detail': nowIsSmartRoomCode }"
        >
          <template v-if="nowIsSmartRoomCode">
            <div class="classroom item">
              <div class="classroom-title">我的爱学班：</div>
              <div class="classroom-name">
                <span>{{
                  smartRoomClassList
                    .slice(0, 2)
                    .map(item => item.grade_name + item.class_name)
                    .join('/')
                }}</span>
                <el-popover
                  v-if="smartRoomClassList.length > 1"
                  placement="bottom"
                  popper-class="custom-popover"
                  trigger="hover"
                >
                  <template #reference>
                    <el-icon color="#B7B8BB">
                      <IEpMoreFilled />
                    </el-icon>
                  </template>
                  <template #default>
                    <div
                      v-for="classroom in smartRoomClassList.slice(2)"
                      :key="classroom"
                    >
                      {{ classroom?.grade_name }}{{ classroom?.class_name }}
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="subject item">
              <div class="subject-title">我的学科：</div>
              <div class="subjects">
                <div class="subject-text">
                  <span>{{ subjectListText[0] }}</span>
                  <el-popover
                    v-if="subjectListText.length > 1"
                    placement="bottom"
                    popper-class="custom-popover"
                    trigger="click"
                  >
                    <template #reference>
                      <el-icon color="#B7B8BB">
                        <IEpMoreFilled />
                      </el-icon>
                    </template>
                    <template #default>
                      <div
                        v-for="subject in subjectListText.slice(1)"
                        :key="subject"
                      >
                        {{ subject }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </div>
            <div class="classroom item">
              <div class="classroom-title">我的班级：</div>
              <div class="classroom-name">
                <span>{{ classroomListText[0] }}</span>
                <el-popover
                  v-if="classroomListText.length > 1"
                  placement="bottom"
                  popper-class="custom-popover"
                  trigger="hover"
                >
                  <template #reference>
                    <el-icon color="#B7B8BB">
                      <IEpMoreFilled />
                    </el-icon>
                  </template>
                  <template #default>
                    <div
                      v-for="classroom in classroomListText.slice(1)"
                      :key="classroom"
                    >
                      {{ classroom }}
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="manage-class" @click="router.push('/classManage')">
      <div class="left flex">
        <img
          class="setting-icon"
          src="@/assets/images/workbench/setting.svg?url"
          alt=""
        />
        <div class="text">班级管理</div>
      </div>
      <div class="right"></div>
    </div>
    <div class="active-info">
      <el-scrollbar>
        <div class="active-teacher">
          <div class="title">
            <img
              class="active-icon"
              src="@/assets/images/workbench/active-icon.svg?url"
              alt=""
            />
            <div class="active-text">活跃教师</div>
          </div>
          <div class="active-list">
            <div
              class="item"
              v-for="(data, index) in activeTeacherList"
              :key="data.name"
            >
              <div class="left">
                <div class="rank">
                  <div class="icon-container" v-if="index <= 2">
                    <img
                      v-if="index === 0"
                      class="rank-icon"
                      src="@/assets/images/workbench/champion.svg?url"
                    />
                    <img
                      v-else-if="index === 1"
                      class="rank-icon"
                      src="@/assets/images/workbench/second-place.svg?url"
                    />
                    <img
                      v-else-if="index === 2"
                      class="rank-icon"
                      src="@/assets/images/workbench/third-place.svg?url"
                    />
                  </div>
                  <div v-else class="rank-number">{{ index + 1 }}</div>
                </div>
                <div class="name">{{ data.teacher_name }}</div>
                <div class="subjects">
                  <template
                    v-for="subject in data.subject_ids?.sort((a, b) => a - b)"
                    :key="subject"
                  >
                    <span class="subject" v-if="subject !== -1">
                      {{ subjectMap[subject] }}
                    </span>
                  </template>
                </div>
              </div>

              <div class="count right">
                <img
                  src="@/assets/images/workbench/hot-icon.svg?url"
                  class="hot-icon"
                />
                <span style="color: #a3a3a3">{{
                  data?.rank_score.toFixed(0)
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onBeforeMount } from 'vue'

import { useAuthStore } from '@/stores'

import { subjectMap } from '@/constants'

import { getTeacherRank } from '@/apis/workbench/index'

import router from '@/router'
import { storeToRefs } from 'pinia'

const authStore = useAuthStore()
const { userInfo, nowIsSmartRoomCode, smartRoomClassList } =
  storeToRefs(authStore)

const props = defineProps({
  teachingInfo: Array,
  classroomList: Array,
  subjectList: Array
})

const schoolName = computed(() => {
  let { school_name } = userInfo.value
  return school_name || '-'
  // if (!props?.teachingInfo) {
  //   return ''
  // } else {
  //   return props?.teachingInfo[0]?.school_name
  // }
})

const subjectListText = computed(() => {
  if (!props?.teachingInfo) {
    return []
  }
  console.log(props?.teachingInfo)

  const subjectList = new Set()
  props?.teachingInfo.forEach(info => {
    if (!info?.subject_list) {
      return
    }
    info.subject_list.forEach(item => {
      subjectList.add(item.name)
    })
  })

  return [...subjectList]
})
const classroomListText = computed(() =>
  props?.classroomList.map(item => item.name)
)

const activeTeacherList = ref([])

onBeforeMount(async () => {
  const data = {
    page: 1,
    size: 15
  }
  const res = await getTeacherRank(data)
  console.log(res.data.list)
  activeTeacherList.value = res.data.list
})
</script>
<!-- eslint-disable-next-line -->
<style lang="less">
.custom-popover {
  min-width: auto !important;
  width: auto !important;
}
</style>
<style lang="less" scoped>
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 354px;
  height: 100%;

  .personal-info {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 20px;
    border-radius: 10px;
    height: 213px;
    background-color: #fff;
    background: url('@/assets/images/workbench/user-info-bg.png') no-repeat
      center center / 100% 100%;

    .header {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      height: 100%;
      border-radius: 5px;

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin-bottom: 20px;

        .user-name {
          font-weight: 500;
          font-size: 22px;
          color: rgb(0 0 0 / 0.85);
        }

        .user-school {
          font-size: 15px;
          color: #999;
        }
      }
    }

    .details {
      display: flex;
      justify-content: center;
      border-top: 1px solid rgba(4, 11, 26, 0.1);

      &.smart-room-detail {
        justify-content: flex-start;

        .item {
          padding-left: 0 !important;
          width: 100% !important;
        }

        .classroom-name {
          width: 100% !important;

          span {
            display: inline-block;
            overflow: hidden;
            width: calc(100% - 40px);
          }
        }
      }

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 85px;
        padding: 5px;
      }

      .subject {
        border-right: 1px dashed #ccc;
        .subject-title {
          font-size: 18px;
          font-weight: 500;
          color: #6aa279;
        }
        .subjects {
          display: flex;
          .subject-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 135px;
            text-align: start;
            font-size: 15px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(4, 11, 26, 0.7);
            padding-right: 15px;
          }
        }
      }

      .classroom {
        padding-left: 15px;
        text-align: start;

        .classroom-title {
          font-size: 18px;
          font-weight: 500;
          color: #6aa279;
        }

        .classroom-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 135px;
          font-size: 15px;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: rgba(4, 11, 26, 0.7);
        }
      }
    }
  }

  .manage-class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 83px;
    padding: 0 25px;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;

    .left {
      .setting-icon {
        width: 16.348px;
        height: 17px;
        object-fit: contain;
      }

      .text {
        font-size: 18px;
        font-weight: 500;
        margin-left: 17.64px;
        color: #343842;
      }
    }

    .right {
      width: 8.793px;
      height: 15px;
      background: url('@/assets/images/common/arrow-right.svg?url') no-repeat
        center center;
      background-size: contain;
    }
  }

  .active-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 625px;
    gap: 13px;
    padding: 0 0 20px 20px;
    border-radius: 10px;
    background-color: #fff;

    .title {
      display: flex;
      align-items: center;
      gap: 16.71px;
      font-size: 18px;
      font-weight: 500;
      margin-top: 20px;
      margin-bottom: 15px;

      .active-icon {
        width: 15px;
        height: 19px;
      }
    }
    .active-text {
      font-size: 18px;
    }
    .active-teacher {
      .active-list {
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e8e8f5;
          margin-top: 10px;
          margin-right: 20px;
          .left {
            display: flex;
            align-items: center;
            gap: 10px;
          }

          .rank {
            display: flex;
            height: 40px;
            align-items: center;
            justify-content: center;
            text-align: center;
            .icon-container {
              position: relative;
              display: inline-block;
            }

            .rank-icon {
              width: 19px;
              height: 23.222px;
            }

            .rank-number {
              width: 19px;
              font-size: 18px;
              color: #515151;
              font-weight: 500;
            }
          }

          .name {
            font-size: 16px;
            color: rgb(0 0 0 / 0.85);
            width: 70px;
            // 文字超出显示省略号
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .subjects {
            display: flex;
            gap: 5px;
            width: 95px;
            overflow: hidden;
            .subject {
              width: 20px;
              height: 20px;
              font-size: 14px;
              color: #619b61;
              border-radius: 3px;
              text-align: center;
              background: #e8fbd4;
            }
          }

          .count {
            display: flex;
            align-items: center;
            align-self: center;
            color: #6958ff;
            font-size: 16px;
            width: 80px;
            .hot-icon {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
